<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s" %>  
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.text{}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.2.0.js">
</script>
<script type="text/javascript" >
/* 	function countPrice(num,price){
		var sum = 0;
		sum = num * price;
		var total = 0;
		$("#count").html(sum);
		$("#total").html("");
		<c:forEach items="${session.forder.shop }" var="sorder" varStatus="num">
			total = $("#count_${num.index+1}").val();
		</c:forEach>
	} */
	var flag = false;
	
	$(function(){
		//注册事件
		$(".text").change(function(){
		//验证数据的有效性
			var number = this.value; //也可以使用$(this).val();
			//isNaN(number)表示若number不是数字就返回真
			if(!isNaN(number) && parseInt(number)==number && number>0){ 
				
				//如果合法，同步更新的数
				$(this).attr("lang", number);
				//找到当前标签中第一个是tr的父节点，然后拿到属性为lang的值，也就是商品的id
				var pid = $(this).parents("tr:first").attr("lang");
				//发送Ajax请求，传输当前的数量与商品的id，返回修改数量后的总价格
				$.ajaxSettings.async = false;
				$.post("shopAction_updateFood.action", {num:number, 'food.id':pid}, function(total){
					/* 	alert(${session.forder.totalmount});
					 $("#total").html(${session.forder.totalmount}); //所有商品的小计
					var yunfei = $("#yunfei").html();
					$("#totalAll").html(${session.forder.totalmount}); //所有商品小计和运费的和  */
				}, "text");
				//计算单个商品的小计，保留两位小数
				/* var price = ($(this).parent().prev().html()*number).toFixed(2);
				$(this).parent().next().html(price); */
				flag = true;
				check(flag);
			} else {
				//如果非法，还原为刚刚合法的数
				this.value = $(this).attr("lang");
			}
		})
	})
	
	function check(f){
		if(f){
			location.reload(); 
		}
		$.ajaxSettings.async = true;
	}
	function deleteFood(id){
		$.ajaxSettings.async = false;
		$.post("shopAction_deleteFood.action", {'food.id':id}, function(total){
			/* 	alert(${session.forder.totalmount});
			 $("#total").html(${session.forder.totalmount}); //所有商品的小计
			var yunfei = $("#yunfei").html();
			$("#totalAll").html(${session.forder.totalmount}); //所有商品小计和运费的和  */
		});
		flag = true;
		check(flag);
	}	
	
	function deleteAll(){
		$.ajaxSettings.async = false;
		$.post("shopAction_deleteAll.action", function(total){
			/* 	alert(${session.forder.totalmount});
			 $("#total").html(${session.forder.totalmount}); //所有商品的小计
			var yunfei = $("#yunfei").html();
			$("#totalAll").html(${session.forder.totalmount}); //所有商品小计和运费的和  */
		});
		flag = true;
		check(flag);
	}				
	function checkOrder(){

		var name = document.getElementById("name").value;
		var phone = document.getElementById("phone").value;
		var address = document.getElementById("address").value;
		
		if(name == null || name == ""){
			alert("姓名不能为空");
			return false;
		}
		if(address == null || address == ""){
			alert("地址不能为空");
			return false;
		}
		if(phone == null || phone == ""){
			alert("电话号码不能为空");
			return false;
		}
 		 if(!/^[0-9]*$/.test(phone) || phone.length != 11){  
			alert("请输入有效的电话号码");
			return false;
		} 
		return true;
	}
</script>
<link href="css/footer.css" type="text/css" rel="stylesheet"/>
</head>
<body>
			<!-- 购物车 -->
			<div id="shopping_cart">
				<br>
				<div id="head" align="center">
				<table  cellpadding="0" cellspacing="0">
					<tr>
						<th class="" width="10%">序号</th>
						<th class="" width="35%">商品名称</th>
						<th class="" width="10%">销售价格</th>
						<th class="" width="20%">数量</th>
						<th class="" width="15%">小计</th>
 						<th class="" width="10%">删除</th>
				</tr>
					<c:forEach items="${session.forder.shop }" var="sorder" varStatus="num">
						<tr lang="${sorder.food.id}">
							 <td align="center" >${num.index+1 }
							</td> 
							<td align="center">${sorder.name }
							</td>
							<td align="center">
								<span id="price">${sorder.price }元</span>	
							</td>
							<td align="center">
								<input class="text"  style="height: 20px;width:30px" value="${sorder.num }" lang="${sorder.num }">		
							</td >
							<td align="center">
								<span  id="count_${num.index+1 }">${sorder.price*sorder.num }元</span>
							</td>
							<td align="center" >
								<a href="javascript:void(1)" onclick="deleteFood(${sorder.food.id})" ><br><img src="${pageContext.request.contextPath}/images/remove.png"></a>
							</td>
						</tr>
						<tr style="height:5px">
							</tr>
						
					</c:forEach>
				</table>
				</div>
				<br>
				<!-- 结算 -->
				<div style="height:100px;margin-right: 350px" align="right" >
					<div>
					<table>
					<tr>
								<td width="60%" colspan="1" class="align_left total"><strong>总计</strong>
								</td>
								<td style="">  
									<c:if test="${session.forder.totalmount eq null }">
										￥<span  id="totalAll"><strong id="total" >0.00</strong></span>
									</c:if>
									<c:if test="${session.forder.totalmount ne null }">
										￥<span  id="totalAll"><strong id="total" >${session.forder.totalmount}元</strong></span>
									</c:if>
									
								</td>
							</tr>
					</table>	
					</div>
					<div >
						
						<button type="button" title="" class="" onclick="deleteAll()">
							<font><font>清空购物车</font>
							</font>
						</button>
						<a href="${pageContext.request.contextPath}/foodAction.action?sId=${session.sellerid}">
							<button type="button" title="" class="">
								<font>返回商家修改</font>
							</button></a>
						<div style="clear:both"></div>
					</div>	
				</div>
				<div align="right" style="margin-right: 350px">
					<%-- <table id="totals-table">
						<tbody>
							  <tr >
								<td width="60%" colspan="1" ><strong >小计</strong>
								</td>
								<td class="align_right" style=""><strong >￥<span
										 id="total">${sessionScope.forder.totalmount}</span>
								</strong>
								</td>
							</tr> 
							 <tr style="height:10px">
							</tr> 
							<tr >
								<td width="60%" colspan="1" class="align_left">配送费</td>
								<td class="align_right" style="">￥<span class="price" id="yunfei">0.00</span>
								</td>
							</tr> 
							<tr style="height:10px">
							</tr>
							
						</tbody>
					</table>--%>
					<form action="orderAction_submitOrder.action" method="post"  onsubmit="return checkOrder()">
						<h2 align="center" style="margin-right: 350px">订单确认</h2>
						<div align="right" style="margin-right: 200px">
							<font color="red">*</font>姓名：<input style="margin-right: 231px" type="text" name="name" id="name"  /><br><br>
							<font color="red">*</font>地址：<input style="width:380px;" type="text" name="address" id="address"  /><br><br>
							<font color="red">*</font>电话号码：<input maxlength="11"  style="margin-right: 231px" type="text" name="phone" id="phone"  /><br><br>
							订单备注：<input style="margin-right: 231px" type="text" name="mark" id="mark"  /><br><br>
							<span style="margin-right: 340px">支付方式：货到付款</span><br><br>
							<input type="hidden" id="userid" name="userid" value="${session.loginUser.id}"/>
						</div>
						<div style="margin-right: 50px" align="right">
							<input  style="margin-right: 50px;aligh:right" type="submit" class="submit" value="提交订单" />
						</div>
					</form>
				</div>
			</div>
</body>
</html>